<template>
  <div class="bg-indigo-50/30">
    <!-- 超浅蓝紫背景 -->
    <!-- 聊天容器 -->
    <div class="max-w-4xl mx-auto p-4">
      <!-- AI消息 -->
      <div class="flex gap-3 mb-4">
        <div class="w-8 h-8 rounded-full bg-indigo-500 flex-shrink-0" />
        <!-- AI头像 -->
        <div class="bg-white rounded-lg p-4 shadow-sm border border-indigo-100">
          <p class="text-gray-700">AI 回复内容</p>
        </div>
      </div>

      <!-- 用户消息 -->
      <div class="flex gap-3 mb-4 justify-end">
        <div class="bg-orange-50 rounded-lg p-4 border border-orange-100">
          <p class="text-gray-800">用户问题</p>
        </div>
        <div class="w-8 h-8 rounded-full bg-orange-400 flex-shrink-0" />
        <!-- 用户头像 -->
      </div>
    </div>

    <!-- 输入框 -->
    <div class="fixed bottom-0 w-full bg-white/80 backdrop-blur-sm shadow-lg p-4">
      <div class="max-w-4xl mx-auto flex gap-2">
        <input
          type="text"
          class="flex-1 rounded-full border border-indigo-200 px-4 py-2 focus:outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200"
          placeholder="请输入您的问题..."
        />
        <button
          class="bg-gradient-to-r from-orange-400 to-orange-200 hover:from-orange-500 hover:to-orange-300 text-white rounded-full px-6 py-2 transition-all duration-300 shadow-sm"
        >
          发送
        </button>
      </div>
    </div>
  </div>
</template>
